<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="dh"
      mode="horizontal"
      @select="handleSelect"
    >

      <el-menu-item index="1">
        <router-link to="/home">首页</router-link>
      </el-menu-item>

      <el-menu-item index="2">
        <router-link to="/oeuvre">全部作品 </router-link>
      </el-menu-item>

      <el-menu-item index="3">
        <router-link to="/order">排行 </router-link>
      </el-menu-item>

      <!-- <el-menu-item index="4"> 完本 </el-menu-item>

      <el-menu-item index="5"> 免费 </el-menu-item> -->

      <!-- <el-menu-item index="6">
        <router-link to="/login">login</router-link>
      </el-menu-item> -->
      <!-- <el-menu-item index="7">
        <router-link to="/register">register</router-link>
      </el-menu-item> -->
    </el-menu>
    <!-- 路由缓存 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.dh {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: nowrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: space-between;
  /* 项目的第一行文字的基线对齐。 */
  align-items: baseline;
}
</style>